<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<div>
  <main>
    <div class="gisthead pagehead bg-gray-light pb-0 pt-3 mb-4">
      <div class="px-0">
        <div class="mb-3 d-flex px-3 px-md-3 px-lg-5">
          <div class="flex-auto min-width-0 width-fit mr-3">
            <div class="d-flex">
              <div class="d-none d-md-block">
                <a class="avatar mr-2 flex-shrink-0" href="{{ .Site.BaseURL }}">
                  <img class=" avatar-user"
                    src="{{ with $.Site.Params.avatar }}{{ $.Site.Params.avatar }}{{ else }}{{ "images/avatar.png" | absURL }}{{ end }}"
                    width="32" height="32"></a>
              </div>
              <div class="d-flex flex-column">
                <h1 class="break-word f3 text-normal mb-md-0 mb-1">
                  <span class="author">
                    <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author }}</a></span><span
                    class="path-divider">/</span><strong class="css-truncate-target mr-1" style="max-width: 410px"><a
                      href="{{ .Permalink }}">{{ .Title }}</a></strong>
                </h1>
                <div class="note m-0">
                  Created <relative-time datetime="{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}"
                    class="no-wrap">
                    {{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}</relative-time>

                  {{ if .Site.Params.lastmod }}
                  <span class="file-info-divider"></span>
                  Modified <relative-time datetime="{{ .Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}"
                    class="no-wrap">
                    {{ .Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}</relative-time>
                  {{ end }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container-lg px-3 new-discussion-timeline">
      <div class="repository-content gist-content">
        <div>
          <div class="js-gist-file-update-container js-task-list-container file-box">
            <div id="file-pytest" class="file my-2">
              <div id="post-header" class="file-header d-flex flex-md-items-center flex-items-start sticky-header">
                <div class="file-info d-flex flex-md-items-center flex-items-start flex-order-1 flex-auto">
                  <div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1 mt-2 mt-md-0">
                    <!-- Copied from github -->
                    <summary id="toc-toggle" class="btn btn-octicon m-0 mr-2 p-2" aria-haspopup="menu" aria-label="Table of Contents" role="button">
                      <svg aria-hidden="true" viewBox="0 0 16 16" height="16" width="16" class="octicon octicon-list-unordered">
                        <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
                      </svg>
                    </summary>
                          {{ countwords .Content }} Words
                    <!-- <span class="file-info-divider"></span>
                                        {{ .ReadingTime }} min -->

                  </div>
                  <div class="file-actions flex-order-2 pt-0">
                    {{ with .Params.tags }}
                    {{ range $tag := . }}
                    <a class="muted-link mr-3" href="{{ relURL (print "/tags/" . | urlize) }}">
                      <svg class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                        <path fill-rule="evenodd"
                          d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z">
                        </path>
                      </svg>
                      {{ $tag }}
                    </a>
                    {{ end }}
                    {{ end }}
                  </div>
                </div>
              </div>


              <div class="Box-body px-5 pb-5">
                <article class="markdown-body entry-content container-lg">
                  {{- .Content -}}
                </article>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
<script>
 // Set up `scroll-padding-top` which is relevant for preventing
 // fixed headers from covering content
 // See https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my
 window.onload = function () {
   const header = document.getElementById('post-header');
   const headerHeight = header.offsetHeight;
   // 10px for a bit of leeway
   document.documentElement.style.scrollPaddingTop = headerHeight + 10 + "px";
 }

 const tocToggleButton = document.getElementById("toc-toggle");

 const tippyInstance = tippy('#toc-toggle', {
  trigger: 'click',
  content: '<div id="table-of-contents">{{ .TableOfContents }}</div>',
  allowHTML: true,
  placement: 'bottom-start',
  interactive: true,
  arrow: false,
  maxWidth: "none",
  onHide: function () { tocToggleButton.classList.remove("hover"); },
  onShow: function () { tocToggleButton.classList.add("hover"); },
  onShown: function () {
    selectTableOfContentsOption();

    if (window.hasSetupTableOfContentsListeners) {
      return;
    }

    const tableOfContents = document.getElementById("table-of-contents");
    tableOfContents.addEventListener('click', function () {
      // Assumes there's only ever 1 tooltip
      tippyInstance[0].hide();
    });

    window.hasSetupTableOfContentsListeners = true;
  }
 });

 function selectTableOfContentsOption () {
   const optionSelectedClass = 'table-of-contents-option-selected';

   const tableOfContentsOptions = document.querySelectorAll("#table-of-contents > nav > ul li");

   for (const option of tableOfContentsOptions) {
     // Find anchors and either select/unselect it based on the URL's hash

     const [child] = option.children;
     if (child.tagName.toLowerCase() !== 'a') {
       continue;
     }

     if (window.location.href === child.href) {
       child.classList.add(optionSelectedClass);
     } else {
       child.classList.remove(optionSelectedClass);
     }
   }
 }

 window.onhashchange = selectTableOfContentsOption;
</script>
